<template>
  <view class="login-main">
    <view
      class="login-main-top d-flex flex-column px-3 j-center"
      :class="isLogin ? 'login-status' : ''"
    >
      <view class="d-flex a-center j-sb">
        <view class="d-flex a-center">
          <view>
            <image
              src="/static/images/user.png"
              style="width:127upx;height: 127upx;"
              alt=""
            >
          </view>
          <view
            v-if="!isLogin"
            class="ml-3"
          >
            <view>
              <text @tap="toRegistPage">注册 </text>
              <text>/</text>
              <text @tap="toLoginPage"> 登录</text>
            </view>
            <view class="font-20">登录后即可体验更多服务</view>
          </view>
          <view
            v-else
            class="ml-3"
          >
            <view>{{username}}</view>
            <view>{{email}}</view>
          </view>
        </view>
        <view
          class="setting iconfont icon-shezhi"
          @tap="skipSettingPage"
        ></view>
        <!-- 签到 -->
        <view class="sign-bg">
          <text class="iconfont icon-qiandao"></text>
          <text>签到</text>
        </view>
      </view>
      <view
        v-if="isLogin"
        class="records-container d-flex a-center"
      >
        <view class="d-flex flex-column records-item">
          <text>0</text>
          <text>浏览</text>
        </view>
        <view class="d-flex flex-column records-item">
          <text>{{collectionList.length}}</text>
          <text>收藏</text>
        </view>
        <view class="d-flex flex-column records-item">
          <text>{{purchaseList.length}}</text>
          <text>购买</text>
        </view>
      </view>
      <!-- 添加面板 -->
      <view
        v-if="isLogin"
        class="add-panel d-flex a-center"
      >
        <view class="d-flex flex-column">
          <text style="font-size: 25upx;font-weight: bold;">我关注的楼盘信息</text>
          <text style="font-size: 17upx;">及时获取房地产动态信息</text>
        </view>
        <view
          class="add-btn d-flex a-center j-center"
          @tap="addEstateInfo"
        >
          <text style="font-size: 22upx;font-weight: bold;">查看</text>
        </view>
      </view>
    </view>
    <!-- 空白区域 -->
    <view
      v-if="isLogin"
      class="block-area"
    ></view>
    <scroll-view
      scroll-y="true"
      :style="'height:' + scrollH + 'px;'"
    >
      <view
        class="d-flex flex-column px-3"
        style="width: 690upx;"
      >
        <view
          class="d-flex a-center j-sb border-bottom mt-1"
          style="height: 96upx;"
        >
          <view class="d-flex a-center">
            <text
              class="iconfont icon-lujing mr-1"
              style="color: #005BAC;"
            ></text>
            <text style="font-weight: 800;">我的收藏（{{collectionList.length}}）</text>
          </view>
          <text
            class="look-text"
            @click="skipTotalDataListPage(1)"
          >查看全部 ></text>
        </view>
        <view>
          <template v-if="collectionList.length > 0">
            <view
              v-for="(item,index) in collectionList"
              v-if="index < 5"
              @tap="skipToArticlePage(item)"
              :key="index"
              class="list-item d-flex j-sb a-center border-bottom"
            >
              <text
                class="single-row-over"
                style="flex:1"
              >{{item.title}}</text>
              <view class="list-item-date">
                <text>{{item.releaseDate}}</text>
              </view>
            </view>
          </template>
          <view
            v-else
            class="list-item d-flex a-center border-bottom"
          >
            <text>暂无记录</text>
          </view>
        </view>
        <view
          class="d-flex a-center j-sb border-bottom mt-1"
          style="height: 96upx;"
        >
          <view class="d-flex a-center">
            <text
              class="iconfont icon-pinglun mr-1"
              style="color: #005BAC;"
            ></text>
            <text style="font-weight: 800;">我的评论（{{commentList.length}}）</text>
          </view>
          <text
            class="look-text"
            @click="skipTotalDataListPage(2)"
          >查看全部 ></text>
        </view>
        <view>
          <template v-if="commentList.length > 0">
            <view
              v-for="(item,index) in commentList"
              v-if="index < 5"
              :key="index"
              class="list-item d-flex j-sb a-center border-bottom"
            >
              <text
                class="single-row-over"
                style="flex:1"
              >{{item.title}}</text>
              <view class="list-item-date">
                <text>{{item.releaseDate}}</text>
              </view>
            </view>
          </template>
          <view
            v-else
            class="list-item d-flex a-center border-bottom"
          >
            <text>暂无记录</text>
          </view>
        </view>
        <view
          class="d-flex a-center j-sb border-bottom mt-1"
          style="height: 96upx;"
        >
          <view class="d-flex a-center">
            <text
              class="iconfont icon-jine mr-1"
              style="color: #005BAC;"
            ></text>
            <text style="font-weight: 800;">购买记录（{{purchaseList.length}}）</text>
          </view>
          <text
            class="look-text"
            @click="skipTotalDataListPage(3)"
          >查看全部 ></text>
        </view>
        <view>
          <template v-if="purchaseList.length > 0">
            <view
              v-for="(item,index) in purchaseList"
              v-if="index < 5"
              :key="index"
              class="list-item d-flex j-sb a-center border-bottom"
            >
              <text
                class="single-row-over"
                style="flex:1"
              >{{item.title}}</text>
              <view class="list-item-date">
                <text>{{item.releaseDate}}</text>
              </view>
            </view>
          </template>
          <view
            v-else
            class="list-item d-flex a-center border-bottom"
          >
            <text>暂无记录</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import api from '@/common/lib/request.js';
export default {
  data() {
    return {
      scrollH: 0,
      email: '',
      isLogin: false,
      collectionList: [],
      commentList: [],
      purchaseList: [],
      token: '',
      username: ''
    };
  },
  computed: {

  },
  onLoad() {
    // uni.getSystemInfo({
    // 	success: res => {
    // 		this.scrollH = res.windowHeight - uni.upx2px(375 + 203);
    // 	}
    // });	
  },
  onShow() {
    this.token = uni.getStorageSync('token');
    if (this.token) {
      this.isLogin = true
      this.refreshScrollH(265)
      this.initMinePage();
    } else {
      this.collectionList = [];
      this.purchaseList = [];
      this.commentList = [];
      this.isLogin = false
      this.refreshScrollH(160)
    }
  },
  methods: {
    //刷新滚动部分高度
    refreshScrollH(val) {
      uni.getSystemInfo({
        success: res => {
          this.scrollH = res.screenHeight - val - 51;
        }
      });
    },
    skipToArticlePage(obj) {

    },
    initMinePage() {
      this.initUserInfo();
      this.initCollectList();
      this.initCommentList();
      this.initPurchaseList();
    },
    // 初始化用户信息
    initUserInfo() {
      let userInfo = uni.getStorageSync('userInfo');
      if (userInfo) {
        let userInfoJson = JSON.parse(userInfo);
        this.username = userInfoJson.userName;
      } else {
        this.username = '';
      }
    },
    skipTotalDataListPage(type) {
      if (this.token) {
        switch (type) {
          case 1:
            this.skipConcernListPage()
            break;
          case 2:
            this.skipCommentListPage()
            break;
          case 3:
            this.skipPurchaseListPage()
            break;
        }
      } else {
        uni.navigateTo({
          url: '/pages/mine/login/login'
        });
      }
    },
    //跳转到收藏界面
    skipConcernListPage() {
      uni.navigateTo({
        url: '/pages/mine/listSet/collectionList/collectionList?username=' + this.username
      })
    },
    skipPurchaseListPage() {
      uni.navigateTo({
        url: '/pages/mine/listSet/purchaseRecords/purchaseRecords?username=' + this.username
      })
    },
    skipCommentListPage() {
      uni.navigateTo({
        url: '/pages/mine/listSet/commentRecords/commentRecords?username=' + this.username
      })
    },
    // 初始化收藏列表
    initCollectList() {
      const _this = this;
      api.request({
        url: '/user/collectionList',
        data: {
          username: _this.username
        }
      })
        .then(response => {
          _this.collectionList = response.map(item => {
            return {
              title: item.title,
              releaseDate: item.releaseDate.split(' ')[0],
              url: item.url
            }
          })
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 初始化评论列表
    initCommentList() {
      const _this = this;
      api.request({
        url: '/user/commentList',
        data: {
          username: _this.username
        }
      })
        .then(response => {
          console.log(response);
          _this.commentList = response.map(item => {
            return {
              title: item.title,
              releaseDate: item.releaseDate.split(' ')[0],
              url: item.url
            }
          })
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 初始化购买列表
    initPurchaseList() {
      const _this = this;
      api.request({
        url: '/user/purchaseList',
        data: {
          username: _this.username
        }
      })
        .then(response => {
          _this.purchaseList = response.map(item => {
            return {
              title: item.title,
              releaseDate: item.releaseDate.split(' ')[0],
              url: item.url
            }
          })
        })
        .catch(err => {
          console.log(err);
        });
    },
    //查看楼盘信息
    addEstateInfo() {
      uni.navigateTo({
        url: '/pages/specialPage/concernList/concernList'
      })
    },
    skipSettingPage() {
      uni.navigateTo({
        url: '/pages/mine/setting/setting'
      });
    },
    toRegistPage() {
      uni.navigateTo({
        url: '/pages/mine/register/register'
      });
    },
    toLoginPage() {
      uni.navigateTo({
        url: '/pages/mine/login/login'
      });
    }
  }
};
</script>

<style scoped>
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}

.login-main-top {
  width: 690upx;
  height: 321upx;
  background-color: #005bac;
  color: white;
  position: relative;
}

.login-status {
  height: 428upx !important;
}

.sign-bg {
  width: 147upx;
  height: 62upx;
  border-radius: 31upx 0 0 31upx;
  background-color: #000000;
  opacity: 0.37;
  line-height: 62upx;
  text-align: center;
  margin-right: -30upx;
  color: #ffffff;
}

.list-item {
  height: 72upx;
  font-size: 21upx;
  color: #717171;
  font-weight: bold;
}

.list-item-date {
  width: 160upx;
  font-size: 17upx;
  color: #a6a6a6;
  text-align: right;
}

.look-text {
  font-weight: 800;
  font-size: 24upx;
  color: #005bac;
}

.setting {
  position: absolute;
  right: 30upx;
  top: 20upx;
  color: white;
  font-size: 60upx;
}

.records-item {
  width: 127upx;
  height: 127upx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.add-panel {
  position: absolute;
  justify-content: space-around;
  z-index: 99;
  left: 43upx;
  bottom: -103upx;
  width: 664upx;
  height: 155upx;
  background: rgba(255, 255, 255, 1);
  color: #003366;
  border: 1upx solid rgba(0, 0, 0, 0.16);
  box-shadow: 0px 5upx 13upx 0px rgba(6, 27, 47, 0.09);
  border-radius: 5upx;
}

.add-btn {
  width: 103upx;
  height: 45upx;
  border: 2upx solid rgba(0, 51, 102, 1);
  border-radius: 22upx;
}

.block-area {
  height: 103upx;
}
</style>
